<template>
  <div id="root-container">
    <div class="main-one-web" style="background: #F5F6F8;    width: 100%;"
   >
      <div class="home-header"
           style="min-width: 1100px;width: 100%;display: flex;align-items: center;justify-content: space-between;background: white">
        <div class="one-ui-pro-nav-logo"><img src="../login/navLogo.png"
                                              alt="logo"></div>

        <el-menu style="min-width: 60px;width: 73%" :default-active="activeIndex" class="el-menu-demo"
                 mode="horizontal"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2" class="custom-menu-item">
            <template slot="title">营销学堂</template>
            <el-menu-item index="2-1"><a class="one-nav-item"
                                         data-is-item="1" tabindex="1"
                                         style="display: inline-flex;">
              <div class="one-nav-item-text">案例锦集<img style="width:15px;" src="./fx.png"></div>
            </a></el-menu-item>
            <el-menu-item index="2-2"><a cla数据趋势ss="one-nav-item" data-is-item="1" tabindex="1"
                                         style="display: inline-flex;">
              <div class="one-nav-item-text">百度认证<img style="width: 15px" src="./fx.png"></div>
            </a></el-menu-item>
            <el-menu-item index="2-3"><a class="one-nav-item" data-is-item="1" tabindex="1"
                                         style="display: inline-flex;">
              <div class="one-nav-item-text">帮助中心<img style="width: 15px" src="./fx.png"></div>
            </a></el-menu-item>

          </el-submenu>
          <el-menu-item index="3-1">
            <router-link to="/zhanghu" target="_blank">账户中心</router-link>
          </el-menu-item>
          <el-menu-item index="3-2">
            <router-link to="/caiwuPage" target="_blank">财务中心</router-link>
          </el-menu-item>
          <el-submenu index="/caiwuPage11" class="custom-menu-item">
            <template slot="title">工具中心</template>
            <el-menu-item index="4-1" class="menuGJ">
              <el-row style="width: 20vw;margin: 1vw;padding-bottom: 1vw;">
                <el-col :span="12">
                  <el-menu-item index="2-0" style="border-bottom:1px solid #eee;width: 100px">
                    <h3 style="font-weight: 600;font-size: 16px;color: black">平台工具</h3>

                  </el-menu-item>

                  <el-menu-item style="width: 200px" index="https://dev2.baidu.com/"><a
                      class="one-nav-item"
                      data-is-item="1" tabindex="1" style="display: inline-flex;"
                      target="_blank" href="https://dev2.baidu.com/">
                    <div class="one-nav-item-text">百度营销API<img style="width: 15px"
                                                               src="./fx.png"></div>
                  </a></el-menu-item>
                  <el-menu-item index="https://editor.baidu.com/"><a class="one-nav-item"
                                                                     target="_blank"
                                                                     href="https://editor.baidu.com/"
                                                                     data-is-item="1"
                                                                     tabindex="1"
                                                                     style="display: inline-flex;">
                    <div class="one-nav-item-text">百度营销客户端<img style="width: 15px"
                                                               src="./fx.png"></div>
                  </a></el-menu-item>
                  <el-menu-item
                      index="https://mobile2.baidu.com/index.html?navfrom=tuiguangtools">
                    <a class="one-nav-item" target="_blank"
                       href="https://mobile2.baidu.com/index.html?navfrom=tuiguangtools"
                       data-is-item="1" tabindex="1"
                       style="display: inline-flex;">
                      <div class="one-nav-item-text">百度营销手机版<img style="width: 15px;"
                                                                 src="./fx.png"></div>
                    </a></el-menu-item>
                  <el-menu-item
                      index="https://mobile2.baidu.com/index.html?navfrom=tuiguangtools">
                    <a class="one-nav-item"
                       href="https://mobile2.baidu.com/index.html?from=uccnApp280"
                       target="_blank"
                       data-is-item="1" tabindex="1"
                       style="display: inline-flex;">
                      <div class="one-nav-item-text"><img style="width: 100%;"
                                                          src="./ewm1.png"></div>
                    </a></el-menu-item>
                </el-col>
                <el-col :span="12">
                  <el-menu-item index="2-0" style="border-bottom:1px solid #eee;">
                    <h3 style="font-weight: 600;font-size: 16px;color: black">第三方应用</h3>

                  </el-menu-item>

                  <el-menu-item index="2-1"><a class="one-nav-item"
                                               data-is-item="1" tabindex="1" target="_blank"
                                               href="https://dev2.baidu.com/cancelauthor"
                                               style="display: inline-flex;">
                    <div class="one-nav-item-text">授权管理<img style="width: 15px;"
                                                            src="./fx.png"></div>
                  </a></el-menu-item>

                </el-col>
              </el-row>
            </el-menu-item>


          </el-submenu>

        </el-menu>
        <div style="min-width:280px;width: 20%;box-sizing: border-box;padding-right:35px;display: flex;justify-content: space-around;">
          <div style="min-width:160px;" class="one-ui-pro-nav-toolbox">
            <div class="one-ui-pro-nav-toolbox-list"><span class="one-ui-pro-nav-toolbox-icon"><span
                class="one-text-link one-ui-pro-nav-toolbox-icon-link one-text-link-medium one-text-link-normal"><div
                class="client-center"><svg min-width="24" height="24" viewBox="0 0 24 24"
                                           class="dls-icon "
                                           focusable="false"><path
                d="M11.953 1a2.81 2.81 0 011 5.436l-.001 4.517h5.144a3 3 0 012.995 2.823l.005.177.001 4.03a2.81 2.81 0 11-2.002 0v-4.03a1 1 0 00-.882-.994l-.117-.006-5.144-.001.002 5.031a2.812 2.812 0 011.8 2.407l.008.22a2.81 2.81 0 11-3.809-2.627v-5.031H5.81a1 1 0 00-.994.884l-.006.117v4.03a2.81 2.81 0 11-2.001 0v-4.03a3 3 0 012.824-2.995l.177-.005h5.143V6.436A2.812 2.812 0 019.152 4.03l-.009-.22A2.81 2.81 0 0111.953 1zM3.81 19.8a.81.81 0 100 1.62.81.81 0 000-1.62zm8.143 0a.81.81 0 100 1.62.81.81 0 000-1.62zm8.143 0a.81.81 0 100 1.62.81.81 0 000-1.62zM11.953 3a.81.81 0 100 1.62.81.81 0 000-1.62z"
                fill-rule="evenodd"></path></svg></div></span></span><span
                class="one-ui-pro-nav-toolbox-icon"><span
                class="one-text-link one-ui-pro-nav-toolbox-icon-link one-text-link-medium one-text-link-normal"><div
                id="aichat-entry-button">
            <div>
              <div><button class="light-ai light-ai-button light-ai-button-medium light-ai-button-icon light-ai-button-icon-medium" type="button" id="aichat-entry" style="font-size: 24px;"><svg fill="none" viewBox="0 0 56 56" class="dls-icon " focusable="false"><image height="56" width="56" href="https://fc-feed.bj.bcebos.com/aix/ai.webp"></image></svg><span><span class="aichat-sdk_EntryButton_entryName_QnhZ9"></span></span></button></div>
               </div></div></span></span>
              <span class="one-ui-pro-nav-toolbox-icon"><span
                  class="one-text-link one-ui-pro-nav-toolbox-icon-link one-text-link-medium one-text-link-normal">
                                    <div
                                        class="toolbox-message">
                                     <span>
                                        <i class="el-icon-message" style="font-size: 16px"></i>
                                </span>
                                       <span>
                                        </span>
                                    </div></span></span>
            </div>
          </div>
          <div style="min-width: 120px;margin-right: 25px" class="one-ui-pro-nav-profile">
                            <span class="uc-cc-nav_trigger one-dropdown-trigger"
                                  style="width: 80%;display: flex;justify-content: flex-start;align-items: center;">
                              <span style="width: 80%;display: flex;justify-content: flex-start;align-items: center">
                                                             <svg style="margin-left: 20px"
                                                                  xmlns="http://www.w3.org/2000/svg" fill="none"
                                                                  viewBox="0 0 24 24" min-width="16" height="16"
                                                                  class="dls-icon one-ui-pro-nav-profile-content-icon-user"
                                                                  focusable="false"><path fill="currentColor"
                                                                                          fill-rule="evenodd"
                                                                                          d="M14.472 12.177a3.955 3.955 0 1 0-4.887-.026A6.001 6.001 0 0 0 6 17.645h2a4 4 0 0 1 8 0h2a6.001 6.001 0 0 0-3.528-5.468zm-4.381-3.122a1.955 1.955 0 1 1 3.909 0 1.955 1.955 0 0 1-3.91 0z"
                                                                                          clip-rule="evenodd"></path><path
                                                                 fill="currentColor" fill-rule="evenodd"
                                                                 d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm0-2a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"
                                                                 clip-rule="evenodd"></path></svg>

                              </span>

 <el-menu  :default-active="activeIndex" class="el-menu-demo1" mode="horizontal"
 >
                            <el-submenu index="12" class="custom-menu-item">
                                <template slot="title">{{ userInfo.userName }}</template>
                    <el-menu-item index="4-1" @click="btnRuhe">退出登录</el-menu-item>


                            </el-submenu>

                        </el-menu>

                               </span>
          </div>
        </div>


      </div>
      <div class="main-body">
        <div>
          <div class="main-document">
            <div class="main-document-trend">
              <div class="data-trend">
                <div class="data-trend-header">
                  <div class="data-trend-header-title">数据趋势</div>

                  <el-row class="data-trend-header-bar">
                    <el-col :span="9">
                      <el-select v-model="form.productType" placeholder="请选择" style="width: 90%"
                                 @change="getpaymentData">
                        <el-option
                            v-for="item in options"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                        </el-option>
                      </el-select>

                    </el-col>
                    <el-col :span="10">
                      <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                                      style="width: 100%"
                                      size="small"
                                      @change="getpaymentData"
                                      value-format="timestamp"
                                      v-model="timerArray"
                                      type="daterange"
                                      :picker-options="pickerOptions"
                                      :clearable="false"
                                      range-separator="~"
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期">
                      </el-date-picker>

                    </el-col>
                    <el-col :span="4">
                      <el-checkbox-group
                          v-model="checkedCities"
                          :min="1"
                          :max="2">
                        <el-checkbox>比较</el-checkbox>
                      </el-checkbox-group>

                    </el-col>
                  </el-row>


                </div>
                <div class="data-trend-cards">
                  <div @click="form.trendsType=item.trendsType;getpaymentData()"
                       v-for="item in atastatistics.trendHeads" :key="item.trendsType"
                       :class="form.trendsType==item.trendsType?'data-trend-card-active':''"
                       class="data-trend-card  data-trend-cards-0 data-trend-cards-cost">
                    <img v-if="item.trendsType=='消费'"
                         src="https://tuiguang.baidu.com/oneWeb/static/8a954bde4e72a33f64daea151d37d6e4.png"
                         alt="">
                    <img v-if="item.trendsType=='展现'"
                         src="https://tuiguang.baidu.com/oneWeb/static/31a15b30d64528b1b298fcc3ca419d86.png"
                         alt="">
                    <img v-if="item.trendsType=='点击'"
                         src="https://tuiguang.baidu.com/oneWeb/static/21875e418b82bcd68d256763a0a1c4d1.png"
                         alt="">
                    <div class="data-trend-card-content">
                      <div class="data-trend-card-content-data">
                        <div class="data-trend-card-content-unit" v-if="item.trendsType=='消费'">{{
                            item.trendsType
                          }}（元）
                        </div>
                        <div class="data-trend-card-content-unit" v-else>{{ item.trendsType }}（次）</div>
                        <div class="data-trend-card-content-ratio">
<!--                          <div class="triangle-arrow triangle-arrow-bottom"-->
<!--                               style="width: 0px;height: 0px;border-color: rgb(90, 204, 101) transparent transparent;border-style: solid;border-width: 5px;"></div>-->
                          {{ item.proportion }}
                        </div>
                      </div>
                      <div class="data-trend-card-content-value">{{ item.trendsNumber }}</div>
                    </div>
                  </div>

                </div>
                <div class="data-trend-chart">
                  <div ref="chart" style="width: 950px;height: 300px;margin-left: -20px"></div>
                </div>
              </div>
              <div class="entries-container">
                <div class="product-card" v-for="item in tuiGuangData" :key="item.menuName"
                     @click="toFc(item.menuLink)">
                  <div class="product-card-title">{{ item.menuName }}</div>
                  <div>
                    <div class="product-card-details"><span
                        class="product-card-name">消费(元)</span><span
                        class="product-card-title" >0</span></div>
                    <div class="product-card-details"><span
                        class="product-card-name">日预算(元)</span><span
                        class="
                                        product-card-value
                                        product-card-value-limitless
                                    ">不限定预算</span>
                      <div class="product-edit-budget">
                        <svg class="one-ui-icon-svg icon-edit" viewBox="0 0 34 34">
                          <g fill="#000" fill-rule="evenodd">
                            <path
                                d="M30.5 14v12a4.5 4.5 0 0 1-4.5 4.5H8A4.5 4.5 0 0 1 3.5 26V8A4.5 4.5 0 0 1 8 3.5h12a1.5 1.5 0 0 0 0-3H8A7.5 7.5 0 0 0 .5 8v18A7.5 7.5 0 0 0 8 33.5h18a7.5 7.5 0 0 0 7.5-7.5V14a1.5 1.5 0 0 0-3 0z"
                                fill-rule="nonzero"></path>
                            <path
                                d="M12.174 18.955L30.205.924a1.5 1.5 0 0 1 2.121 2.121L14.295 21.076a1.5 1.5 0 0 1-2.121-2.121z"></path>
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div class="product-card-btn">
                    <button type="button" name=""
v-if="item.menuFlag!=='暂未开通'"
                            class="one-button one-main one-button-primary one-button-medium"><span>{{
                        item.menuFlag
                      }}</span>
                    </button>

                    <button v-else
                      type="button" disabled="" name=""
                      class="one-button one-main one-button-normal one-button-medium one-button-normal-disabled"
                      style="pointer-events: none;background: #eee"><span>{{
                        item.menuFlag
                      }}</span></button>


                  </div>
                </div>
                <!--                <div class="product-card">-->
                <!--                  <div class="product-card-title">信息流推广</div>-->
                <!--                  <div>-->
                <!--                    <div class="product-card-details"><span-->
                <!--                        class="product-card-name">消费(元)</span><span-->
                <!--                        class="product-card-value">0</span></div>-->
                <!--                    <div class="product-card-details"><span-->
                <!--                        class="product-card-name">日预算(元)</span><span-->
                <!--                        class="-->
                <!--                                        product-card-value-->
                <!--                                        product-card-value-limitless-->
                <!--                                    ">不限定预算</span>-->
                <!--                      <div class="product-edit-budget">-->
                <!--                        <svg class="one-ui-icon-svg icon-edit" viewBox="0 0 34 34">-->
                <!--                          <g fill="#000" fill-rule="evenodd">-->
                <!--                            <path-->
                <!--                                d="M30.5 14v12a4.5 4.5 0 0 1-4.5 4.5H8A4.5 4.5 0 0 1 3.5 26V8A4.5 4.5 0 0 1 8 3.5h12a1.5 1.5 0 0 0 0-3H8A7.5 7.5 0 0 0 .5 8v18A7.5 7.5 0 0 0 8 33.5h18a7.5 7.5 0 0 0 7.5-7.5V14a1.5 1.5 0 0 0-3 0z"-->
                <!--                                fill-rule="nonzero"></path>-->
                <!--                            <path-->
                <!--                                d="M12.174 18.955L30.205.924a1.5 1.5 0 0 1 2.121 2.121L14.295 21.076a1.5 1.5 0 0 1-2.121-2.121z"></path>-->
                <!--                          </g>-->
                <!--                        </svg>-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                  <div class="product-card-btn">-->
                <!--                    <button type="button" name="" @click="btnXiu"-->
                <!--                            class="one-button one-main one-button-primary one-button-medium"><span>进入</span>-->
                <!--                    </button>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="product-card">-->
                <!--                  <div class="product-card-title">电商推广</div>-->
                <!--                  <div class="product-card-desc">基于百度搜索和信息流流量，进行商品和直播间推广，助力电商客户高效管理和经营。</div>-->
                <!--                  <div class="product-card-btn"><span-->
                <!--                      style="display: inline-block; cursor: not-allowed;"><button-->
                <!--                      type="button" disabled="" name=""-->
                <!--                      class="one-button one-main one-button-normal one-button-medium one-button-normal-disabled"-->
                <!--                      style="pointer-events: none;background: #eee"><span>暂未开通</span></button></span>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="product-card">-->
                <!--                  <div class="product-card-title">阿拉丁推广</div>-->
                <!--                  <div class="product-card-desc">阿拉丁推广通过精准识别用户搜索需求和意图，触发行业定制化的搜索特型结果。</div>-->
                <!--                  <div class="product-card-btn">-->
                <!--                    <button type="button" name="" @click="btnXiu"-->
                <!--                            class="one-button one-main one-button-primary one-button-medium">-->
                <!--                      <span>申请开通</span></button>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="product-card">-->
                <!--                  <div class="product-card-title">知识营销</div>-->
                <!--                  <div>-->
                <!--                    <div class="product-card-details"><span-->
                <!--                        class="product-card-name">消费(元)</span><span-->
                <!--                        class="product-card-value">0</span></div>-->
                <!--                  </div>-->
                <!--                  <div class="product-card-btn">-->
                <!--                    <button type="button" name="" @click="btnXiu"-->
                <!--                            class="one-button one-main one-button-primary one-button-medium"><span>进入</span>-->
                <!--                    </button>-->
                <!--                  </div>-->
                <!--                </div>-->
              </div>
              <div class="services-container is-not-kacrm">
                <div class="services-container-padding">
                  <div class="services-container-marketing">营销服务</div>
                  <div class="services-container-services" v-for="item in yinXiaoData" :key="item.menuName">

                               <span class="common-out-link">
  <span>
    <img :src="item.menuIcon" :alt="item.menuName">
  </span>
  <span>
    <a :href="item.menuLink"
       target="_blank"
       class="services-container-title">{{ item.menuName }}</a>
  </span>
</span></div>
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/f764634ea111708404c4b09be1a6df66.png"-->
                  <!--                      alt="营销服务"></span><span><a-->
                  <!--                      href="https://kaidian.baidu.com/mallplat/home?fromType=1&ucId=50449389"-->
                  <!--                      target="_blank"-->
                  <!--                      class="services-container-title">基木鱼开店</a></span></span></div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/6e57de27dde3ed71ce09710bf6578ff6.png"-->
                  <!--                      alt="营销服务"></span><span><a-->
                  <!--                      href="https://cdp.baidu.com/static/main/dashboard?targetUserId=50449389"-->
                  <!--                      target="_blank"-->
                  <!--                      class="services-container-title">观星盘</a></span></span></div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/aebd8c69c74d6ce2d921889661ecd13b.png"-->
                  <!--                      alt="营销服务"></span><span><a-->
                  <!--                      href="https://aifanfan.baidu.com/console/#/?clearMenu=1" target="_blank"-->
                  <!--                      class="services-container-title">爱番番</a></span></span></div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/12cb28352954021be8f930a5c8020a57.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">服务市场</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/98fff8c23f5ac60048cc477ae87d8a37.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">创意中心</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/ef6dfc8e83be731350705ac28d25d2cd.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">百度统计</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/ac81dd6e032e7405f5eeac894b212db3.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">度星选</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/f823ad3ca984883ec1a4da02a7486269.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">爱采购</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/62bb610a148ee32782dd26b7ab7ea5de.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">营销通</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/abfe9adf5fb647d80550aea631dc2e98.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">企业号</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/923a2d7fce670b7984b8c780a7567141.svg"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">企业服务</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/beb9c91c61d686340fec7939d0901e3c.svg"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">加盟星</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/d99990d7d7dfdcf83c94229d0d779120.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">百+</a></span></span>-->
                  <!--                  </div>-->
                  <!--                  <div class="services-container-services"><span class="common-out-link "><span><img-->
                  <!--                      src="https://tuiguang.baidu.com/oneWeb/static/7155f853d798f0746fb207c4e52b3e90.png"-->
                  <!--                      alt="营销服务"></span><span><a href="" target="_blank"-->
                  <!--                                                 class="services-container-title">擎舵</a></span></span>-->
                  <!--                  </div>-->
                </div>
              </div>
            </div>
            <div class="main-document-right">
              <div class="account-container account-container-">
                <div class="userguide-placeholder"></div>
                <div class="account-container-account">
                  <div class="account-container-account-name"><span>您好，</span><span>{{ userInfo.userName }}</span>
                  </div>
                  <div class="account-container-account-to-examine"><span v-if="userInfo.balance>0"
                                                                          class="account-container-account-status">余额为{{
                      userInfo.balance
                    }}</span>
                    <span v-else
                          class="account-container-account-status">余额为零</span>
                    <span
                        class="common-out-link count-container-account-safe"><span><img
                        src="https://tuiguang.baidu.com/oneWeb/static/8e4333a42c1a3c1e15e9345c0b883601.png"
                        alt="保logo"></span></span></div>
                  <div class="account-container-account-item account-container-account-balance ">
                    <div class="account-container-account-value">
                      <div class="account-container-account-value-name">推广余额</div>
                      <div class="account-container-account-value-number">
                        {{ userInfo.searchBalance }}
                      </div>
                    </div>
                    <span class="common-out-link account-container-account-button"><span><button
                        type="button" name="" @click="btnXiu"
                        class="one-button one-main one-button-primary one-button-medium"><span>充值</span></button></span></span>
                  </div>
                  <div class="account-container-account-item account-container-account-xin-yong">
                    <div class="">
                      <div class="account-container-account-value">
                        <div class="account-container-account-value-name">合规信用值</div>
                        <div class="account-container-account-value-number">
                          {{ userInfo.creditValue }}
                        </div>
                      </div>
                      <span
                          class="one-text-link account-container-account-button one-text-link-medium one-text-link-normal"><span
                          class="link-btn">详情</span></span></div>
                  </div>
                </div>
              </div>
              <div class="carcousel-container">
                <el-carousel trigger="click" height="148px">
                  <el-carousel-item v-for="item in homeData" :key="item.homeIcon">
                    <a data-v-5aa3520a=""
                       href="item.homeLink"
                       target="_blank" class="slider-item pull-left" style="">
                      <img data-v-5aa3520a=""
                           style="height: 100%;width: 100%"
                           :src="item.homeIcon"
                           alt="">
                    </a>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="product-dynamic-and-pinpai-container">
                <div class="product-dynamic-container have-dynamic-content">
                  <div class="product-dynamic-container-head"><span class="title">产品动态</span><span
                      class="one-text-link display-more one-text-link-medium one-text-link-normal">更多</span>
                  </div>
                  <el-carousel trigger="click" height="200px" indicator-position="outside">
                    <el-carousel-item>
                      <div data-index="0" class="slick-slide" tabindex="-1"
                           aria-hidden="true" style="outline: none; width: 288px;">
                        <div>
                          <div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div>
                                  <div class="product-dynamic-carcousel-item-head">
                                    <span class="one-text-link one-text-link-medium one-text-link-normal">IM数字人客服能力升级&amp;线索管家服务质量诊断功能上线&amp;优化部分体验（小流量）</span>
                                  </div>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">爱番番</span><span
                                  class="mod-time">2024.02.02</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div class="product-dynamic-carcousel-item-head">
                                  <span
                                      class="one-text-link one-text-link-medium one-text-link-normal">轻舸平台新增「营销方案推理模式」</span>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.31</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div class="product-dynamic-carcousel-item-head">
                                  <span
                                      class="one-text-link one-text-link-medium one-text-link-normal">春节不打烊『轻舸』扬帆护航方案</span>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.31</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div>
                                  <div class="product-dynamic-carcousel-item-head">
                                    <span class="one-text-link one-text-link-medium one-text-link-normal">轻舸平台支持7日预算、诊断能力升级、新增参照落地页补充prompt描述等能力</span>
                                  </div>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.26</span></div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </el-carousel-item>
                    <el-carousel-item>
                      <div data-index="0" class="slick-slide" tabindex="-1"
                           aria-hidden="true" style="outline: none; width: 288px;">
                        <div>
                          <div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div>
                                  <div class="product-dynamic-carcousel-item-head">
                                    <span class="one-text-link one-text-link-medium one-text-link-normal">IM数字人客服能力升级&amp;线索管家服务质量诊断功能上线&amp;优化部分体验（小流量）</span>
                                  </div>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">爱番番</span><span
                                  class="mod-time">2024.02.02</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div class="product-dynamic-carcousel-item-head">
                                  <span
                                      class="one-text-link one-text-link-medium one-text-link-normal">轻舸平台新增「营销方案推理模式」</span>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.31</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div class="product-dynamic-carcousel-item-head">
                                  <span
                                      class="one-text-link one-text-link-medium one-text-link-normal">春节不打烊『轻舸』扬帆护航方案</span>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.31</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div>
                                  <div class="product-dynamic-carcousel-item-head">
                                    <span class="one-text-link one-text-link-medium one-text-link-normal">轻舸平台支持7日预算、诊断能力升级、新增参照落地页补充prompt描述等能力</span>
                                  </div>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.26</span></div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </el-carousel-item>
                    <el-carousel-item>
                      <div data-index="0" class="slick-slide" tabindex="-1"
                           aria-hidden="true" style="outline: none; width: 288px;">
                        <div>
                          <div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div>
                                  <div class="product-dynamic-carcousel-item-head">
                                    <span class="one-text-link one-text-link-medium one-text-link-normal">IM数字人客服能力升级&amp;线索管家服务质量诊断功能上线&amp;优化部分体验（小流量）</span>
                                  </div>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">爱番番</span><span
                                  class="mod-time">2024.02.02</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div class="product-dynamic-carcousel-item-head">
                                  <span
                                      class="one-text-link one-text-link-medium one-text-link-normal">轻舸平台新增「营销方案推理模式」</span>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.31</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div class="product-dynamic-carcousel-item-head">
                                  <span
                                      class="one-text-link one-text-link-medium one-text-link-normal">春节不打烊『轻舸』扬帆护航方案</span>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.31</span></div>
                            </div>
                            <div class="product-dynamic-carcousel-item">
                              <div>
                                <div>
                                  <div class="product-dynamic-carcousel-item-head">
                                    <span class="one-text-link one-text-link-medium one-text-link-normal">轻舸平台支持7日预算、诊断能力升级、新增参照落地页补充prompt描述等能力</span>
                                  </div>
                                </div>
                              </div>
                              <div class="product-dynamic-carcousel-item-foot">
                                <span class="app-name">搜索推广</span><span
                                  class="mod-time">2024.01.26</span></div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </el-carousel-item>
                  </el-carousel>
                </div>
                <!--  品牌推广-->
                <div class="pinpai-container">
                  <div class="pinpai-container-gapline"></div>
                  <div class="pinpai-container-copywrit"><span class="common-out-link "><span><span
                      class="pinpai-container-left-title">品牌推广</span></span></span>
                    <div class="pinpai-container-advertisement">
                      <div class="hot-product-title">热门产品：</div>
                      <span class="common-out-link "><span><button type="button" name=""
                                                                   class="one-button pinpai-container-name one-main one-button-normal one-button-medium"><span>品牌广告</span></button></span></span><span
                        class="common-out-link "><span><button type="button" name=""
                                                               class="one-button pinpai-container-name one-main one-button-normal one-button-medium"><span>百度聚屏</span></button></span></span>
                    </div>
                  </div>
                  <span class="common-out-link "><span><img
                      style="  width: 288px;
                    height: 152px;
                    cursor: pointer;"
                      src="	https://tuiguang.baidu.com/oneWeb/static/ff0660f6195042dbc89f78faacbaa2ee.png"
                      alt="品牌相关产品"></span></span></div>
              </div>
            </div>
          </div>

        </div>
        <div class="one-web-footer">
                    <span class=""><footer class="cpu-footer cpu-footer-simple"><div
                        class="cpu-footer-copyright"><span>©2024 Baidu</span> <a target="_blank"
                                                                                 rel="noopener noreferrer"
                                                                                 href="https://www.baidu.com/duty">使用百度前必读</a> <a
                        target="_blank" rel="noopener noreferrer"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a> 互联网信息服务许可 我已阅读并接受<a
                        target="_blank" rel="noopener noreferrer" href="http://e.baidu.com/accept.html">百度推广服务合同</a> 欢迎访问<a
                        target="_blank" rel="noopener noreferrer"
                        href="http://rules.baidu.com/userpolicy">百度推广政策中心</a></div></footer></span>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import echartsUrl from './echartsNOdata.png'
import {getLocalStorageItem,removeLocalStorageItem} from '@/utils/storage-helper'
import {datastatisticsList, dynamicsList, homeList, homeMenuList} from '@/services/model/index'
import * as echarts from 'echarts';
export default {
  beforeRouteEnter(to, from, next) {
    document.title = '百度营销-首页'; // 更新页面标题
    next();
  },
  data() {
    return {
      echartsUrl: echartsUrl,
      userInfo: getLocalStorageItem('userInfo'),
      activeIndex: '1',
      homeData: [],
      tuiGuangData: [],
      yinXiaoData: [],
      dynamicsList: [],
      form: {
        userId: getLocalStorageItem('userInfo').userId,
        trendsType: '消费',
        productType: '全部推广',
      },
      options: [{code: '', title: '全部推广'}, {code: '搜索', title: '搜索'}, {code: '信息流', title: '信息流'}, {
        code: '电商',
        title: '电商'
      }, {code: '阿拉丁', title: '阿拉丁'}, {code: '知识营销', title: '知识营销'}],
      checkedCities: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          }
        },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },

          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近14天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },],
        onPick: obj => {
          this.picerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          // if (this.picerMinDate) {
          //   // 最多可选3个月
          //   const LIMIT = 90 * 24 * 60 * 60 * 1000
          //   const maxTime = this.picerMinDate + LIMIT
          //   const minTime = this.picerMinDate - LIMIT
          //   return time.getTime() > maxTime || time.getTime() < minTime
          // }
        }
      },
      atastatistics: {},
      timerArray: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30), new Date()], // 初始化为 null 或合适的日期值，
      tabPanes: [],
      isTestAll: ' ',
      isTest1: true,
      isTest2: true,
      tabsName: [],
      isEcharts: 0,
      activeName: "hourlyRainfall",
      monitoringsTime: [],
      // 当前的图表钩子
      chartsName: ['dailyRain', 'hourlyRain', 'hourlyRainfall'],
      // 分页参数

      // 弹窗title
      dialogTitle: "",
      // 是否显示弹窗
      isShowDialog: false,
    };
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    },
  },
  computed: {
    // 筛选类型改变
    detailList() {
      return (
          this.typeOneUmumList.find((x) => x.code === this.calcTypeModel)
              ?.relationTypeList || []
      );
    },
    calcTypeModel: {
      get() {
        return this.calcType;
      },
      set(value) {
        this.$emit("update:calcType", value);
      },
    },
    calcValModel: {
      get() {
        return this.calcVal;
      },
      set(value) {
        this.$emit("update:calcVal", value);
      },
    },
  },
  methods: {
    initChart() {
      if (this.chart) {
        // 清理旧的图表实例
        this.chart.clear();
      } else {
        this.chart = echarts.init(this.$refs.chart);

      }
      let xData = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'];
      let series = [];
      let hasData = this.atastatistics.trends.length > 0;  // 检查是否有数据
      if (hasData) {
        xData = []
      }
      let option = {}
      let maxVal = 0;
      this.atastatistics.trends.forEach(x => {
        xData.push(x.trendsGenerateTime);
        series.push(x.trendsNumber);
        if (x.trendsNumber > maxVal) {
          maxVal = x.trendsNumber;
        }
      });
      let yAxisInterval = series.length > 0 ? this.calculateYAxisInterval(maxVal) : 100;
      let yAxisMax = series.length > 0 ? Math.ceil(maxVal / yAxisInterval) * yAxisInterval : 500;

      option = {

        tooltip: {},
        legend: {
          data: ['网站流量', '搜索引擎']
        },
        xAxis: {
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLine: {  // 控制轴线是否显示
            show: true,
            lineStyle: {
              color: 'rgb(168,168,168)' // 轴线颜色
            },

          },

          type: 'category',  // 类别轴，适用于离散的类别数据
          data: xData
        },
        yAxis: {
          lineStyle: {
            color: 'rgb(168,168,168)' // 轴线颜色
          },

          axisTick: {
            show: false // 隐藏X轴刻度
          },
          name: '消费',  // X轴的名称
          axisLine: {  // 控制轴线是否显示
            show: true,
            lineStyle: {
              color: 'rgb(168,168,168)' // 轴线颜色
            },

          },
          type: 'value',  // 数值轴，适用于连续数据
          min: 0,  // Y轴的最小值
          max:yAxisMax,  // Y轴的最大值
          splitLine: {
            show: false  // 不显示Y轴的网格线
          }
        },
        series: [{
          lineStyle: {
            color: '#00aaff'  // 设置线条颜色
          },
          itemStyle: {
            color: '#00aaff'  // 设置线条颜色
          }, showSymbol: false,
          name: '计算结果',
          type: 'line',
          data: series
        }],
        graphic: []  // 初始化 graphic 数组
      };

      // 当没有数据时，显示自定义图形和文本

      if (series.length === 0) {
        option.series = [];
        option.graphic = {
          type: 'image',
          id: 'logo',
          right: 'center',
          top: 50,
          z: -10,
          bounding: 'raw',
          origin: [75, 75],
          style: {
            image: this.echartsUrl,  // 设置你的图像路径
            width: 300,

            opacity: 0.8
          }
        };
      }
      this.chart.setOption(option);
    },

    btnXiu() {
      this.$message('服务器繁忙,请稍后重试！');
    },
    calculateYAxisInterval(maxValue) {
      // 调整后逻辑
      if (maxValue > 2000) {
        return Math.ceil((maxValue / 7) / 100) * 100; // 除以7再向上取百位数
      } else {
        let interval = Math.ceil(maxValue / 4 / 100) * 100;
        // 防止 interval 小于 100
        return interval < 100 ? 100 : interval; // 确保间隔最小为 100
      }
    },
    formatDate(date) {
      if (!(date instanceof Date)) {
        date = new Date(date);
      }
      let month = '' + (date.getMonth() + 1),
          day = '' + date.getDate(),
          year = date.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
    },
    btnRuhe(){
      removeLocalStorageItem('USER_TOKEN')
      this.$router.push('/')
    },
    //   获取数据趋势
    async getpaymentData() {
      let name
      if (this.form.productType == '全部推广') {
        this.form.productType = null
        name = '全部推广'

      }
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let data = await datastatisticsList(this.form)
      this.atastatistics = data.data
      if (name) {
        this.form.productType = '全部推广'

      }
      this.initChart()
    },
    toFc(menuLink) {
      window.open(menuLink, '_blank');
      // this.$router.push('/fc/datacenter')
    },
    // 产品动态
    async getDynamicsList() {
      let data = await dynamicsList(this.form)
      this.dynamicsList = data.data
    },
    // 首页广告
    async getHomeList() {
      let data = await homeList(this.form)
      this.homeData = data.data

      let tuiGuangData = await homeMenuList({menuType: '推广服务'})
      let yinXiaoData = await homeMenuList({menuType: '营销服务'})
      this.tuiGuangData = tuiGuangData.data
      this.yinXiaoData = yinXiaoData.data
    },
    // 账户概况

  },
  mounted() {
    this.getpaymentData()
    this.getHomeList()
    this.getDynamicsList()
console.log(11111111,this.userInfo)
    this.chartsName.map((name) => {

    });

  }
};
</script>
<style scoped lang="less">


.one-ui-pro-nav-logo {
  margin-left: 32px;
  height: 64px;
  align-items: center;
  font-size: 0;
  display: flex;
  text-align: center;

  img {
    width: 91px;
  }
}

.main-body {
  margin: 0 auto;
  width: 100%;
  min-width: 1120px;
  min-height: calc(100vh - 64px);


  .main-document {
    font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
    margin: 25px auto 0;
    width: 1220px;
    min-height: 820px;
    display: flex;
    justify-content: space-between;


    .main-document-trend {
      -webkit-text-size-adjust: 100%;

      display: inline-block;
    }

    .entries-container {
      font-size: 12px;
      width: 909px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 22px;
      margin: 22px 0;
      min-height: 358px;

      .product-card {
        height: 164px;
        background-color: #fff;
        display: inline-table;
        padding: 20px;
        box-shadow: 1px 1px 10px 0 rgba(183, 183, 188, .1);
        border-radius: 8px;
        position: relative;
        box-sizing: border-box;

        .product-card-title {
          font-size: 14px;
          line-height: 25px;
          margin-bottom: 20px;
        }

        .product-card-desc {
          font-weight: 400;
          font-size: 12px;
          box-sizing: var(--light-ai-box-sizing, border-box);
          line-height: 20px;
          color: #666;
        }

        .product-card-btn {
          position: absolute;
          right: 10px;
          top: 15px;

          .one-button {
            margin: 0;
            overflow: visible;
            text-transform: none;
            font-weight: 400;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            box-sizing: border-box;
            outline: none;
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            line-height: 1;
            white-space: nowrap;
            vertical-align: middle;
            transition-property: border-color, background-color, color, opacity, box-shadow;
            transition-duration: .2s;
            cursor: pointer;
            background-color: #0054e6;
            color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            font-size: 14px;
            padding: 0 16px;
            height: 32px;
            -webkit-appearance: button;
          }
        }

        .product-card-details {
          font-weight: 400;
          line-height: 1.4;
          color: rgba(19, 22, 26, 0.9);
          font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
          font-size: 12px;
          box-sizing: var(--light-ai-box-sizing, border-box);
          margin-top: 20px;
          display: table;

          .product-card-name {
            font-weight: 400;
            line-height: 1.4;
            --one-ui-pro-card-tree-node-color: #c5ccdb;
            font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
            font-size: 12px;
            color: #999;
            padding-right: 10px;
          }

          .product-edit-budget {
            display: inline;
            cursor: pointer;
            padding-left: 10px;

            .one-ui-icon-svg {
              color: rgba(19, 22, 26, 0.9);
              font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
              font-size: 12px;
              cursor: pointer;
              width: 12px;
              fill: rgb(0, 0, 0);
              fill-rule: evenodd;
              box-sizing: var(--light-ai-box-sizing, border-box);
            }
          }
        }

      }
    }

    .data-trend {

      color: rgba(19, 22, 26, 0.9);
      box-sizing: var(--light-ai-box-sizing, border-box);
      width: 909px;
      height: 417px;
      box-shadow: 1px 1px 20px 0 rgba(183, 183, 188, .1);
      border-radius: 8px;
      background-color: #fff;
      padding: 18px 20px 2px;
      display: inline-block;

      .data-trend-header {
        -webkit-text-size-adjust: 100%;
        display: flex;
        height: 32px;
        width: 100%;
        justify-content: space-between;
        line-height: 32px;

        .data-trend-header-title {
          box-sizing: var(--light-ai-box-sizing, border-box);
          font-size: 21px;
        }

        .data-trend-header-bar {
          box-sizing: var(--light-ai-box-sizing, border-box);
          display: flex;
          height: 40px;
          width: 60%;
          line-height: 40px;
          align-items: center;
          justify-content: space-between !important;

          /deep/ .el-input__inner {
            height: 30px;
          }
        }
      }

      .data-trend-cards {
        display: flex;
        margin-top: 10px;

        .data-trend-card {
          display: flex;
          background: #f7f8f8;
          border-radius: 6px;
          width: 276px;
          height: 79px;
          align-items: center;
          cursor: pointer;
          margin-left: 20px;

          img {
            width: 40px;
            height: 40px;
            margin: 0 10px;
          }

          .data-trend-card-content {
            cursor: pointer;
            box-sizing: var(--light-ai-box-sizing, border-box);
            height: 47px;

            .data-trend-card-content-data {
              display: flex;
              justify-content: space-between;
              width: 200px;

              .data-trend-card-content-unit {
                font-size: 12px;
                color: #999;
                line-height: 18px;
              }

              .data-trend-card-content-ratio {
                display: flex;
                font-size: 12px;
                color: #000;
                line-height: 18px;

                .triangle-arrow {
                  width: 0px;
                  height: 0px;
                  border-color: rgb(90, 204, 101) transparent transparent;
                  border-style: solid;
                  border-width: 5px;

                }
              }
            }

            .data-trend-card-content-value {
              font-size: 24px;
              line-height: 26px;
              margin-top: 3px;
              max-width: 200px;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }

        .data-trend-card-active {
          background-image: linear-gradient(137deg, #5f51ff, #326fff 76%) !important;

          .data-trend-card-content {
            cursor: pointer;
            box-sizing: var(--light-ai-box-sizing, border-box);
            height: 47px;

            .data-trend-card-content-data {
              display: flex;
              justify-content: space-between;
              width: 200px;

              .data-trend-card-content-unit {
                font-size: 12px;
                line-height: 18px;
                opacity: .8;
                color: #fff;

              }

              .data-trend-card-content-ratio {
                display: flex;
                font-size: 12px;
                color: #fff;
                line-height: 18px;

                .triangle-arrow {
                  width: 0px;
                  height: 0px;
                  border-color: rgb(90, 204, 101) transparent transparent;
                  border-style: solid;
                  border-width: 5px;

                }
              }
            }

            .data-trend-card-content-value {
              font-size: 24px;
              line-height: 26px;
              margin-top: 3px;
              max-width: 200px;
              text-overflow: ellipsis;
              overflow: hidden;
              color: #fff;
            }
          }
        }
      }
    }

    .services-container {
      width: 909px;
      background: #fff;
      border-radius: 8px;

      .services-container-padding {
        padding: 20px;

        .services-container-marketing {
          font-size: 21px;
        }

        .services-container-services {
          display: inline-block;
          margin: 20px 36px;
          cursor: pointer;
          text-align: center;
          width: 100px;

          img {
            width: 70px;
            height: 70px;
          }

          .common-out-link {

            cursor: pointer;
            text-align: center;
            box-sizing: var(--light-ai-box-sizing, border-box);


            .services-container-title {
              display: block;
              text-align: center;
              font-size: 14px;
              margin-top: 3px;
            }
          }
        }

      }
    }
  }

  .one-web-footer {
    font-size: 12px;
    color: #848b99;
    text-align: center;
    display: block;

    .cpu-footer {
      font-weight: 400;
      box-sizing: var(--light-ai-box-sizing, border-box);
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
      color: #c5ccdb;
      text-align: center;
      background-color: transparent;
      font-size: 12px;

      .cpu-footer-copyright {
        text-align: center;
        box-sizing: border-box;
        margin: 0;
        font: inherit;
        color: #848b99;
        padding: 24px 0;
      }

      a {
        text-decoration: none;
        transition: color .2s ease;
        outline: none;
      }
    }

    .cpu-footer a, .cpu-footer a:link, .cpu-footer a:visited {
      font: inherit;
      color: inherit;
    }
  }
}

.el-menu--popup img {
  margin-left: 10%;

}

.one-ui-pro-nav-toolbox {
  display: flex;
  flex: none;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  margin-left: 24px;

  .one-ui-pro-nav-toolbox-list {
    display: flex;
    height: 100%;
    align-items: center;

    .one-ui-pro-nav-toolbox-icon:first-child {
      margin-left: 0;
    }

    .one-ui-pro-nav-toolbox-icon {
      display: inline-flex;
      align-items: center;
      height: 100%;
      margin-left: 16px;
      z-index: 99;

      .one-ui-pro-nav-toolbox-icon-link {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        color: #13161ae6;
        cursor: pointer;
        text-decoration: none;

        .client-center {
          height: 16px;
        }

      }
    }

    .one-ui-pro-nav-toolbox-icon {

      .one-text-link-normal {

        #aichat-entry-button {

          .light-ai {

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            white-space: nowrap;
            position: relative;
            font-weight: 500;
            height: 36px;
            min-height: 36px;
            padding: 0 20px;
            border-radius: 6px;
            color: rgba(80, 90, 107, 0.8);
            background: transparent;
            font-size: 24px;

            .dls-icon {
              height: calc(1em + 2px);

              image {
                cursor: pointer;
              }
            }

            .aichat-sdk_EntryButton_entryName_QnhZ9 {

              display: flex;
              width: 56px;
              height: 14px;
              background: url(//ecma.bdimg.com/public01/1379d218ebf7d3cf81aa369500265544.png);
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }
  }

  .one-ui-pro-nav-profile {
    font-size: 14px;
    line-height: 1.4;
    margin-left: 16px;
    height: 100%;

    .uc-cc-nav_trigger {
      display: flex;
      align-items: center;
      height: 100%;
    }

  }
}

.el-menu-demo1 {


  /deep/ .el-submenu__title {
    box-sizing: border-box;
    padding: 0 10px;
  }
}

.main-document-right {
  float: right;

  .one-button {

    margin: 0;
    overflow: visible;
    text-transform: none;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    box-sizing: border-box;
    outline: none;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    transition-property: border-color, background-color, color, opacity, box-shadow;
    transition-duration: .2s;
    cursor: pointer;
    background-color: #0054e6;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 16px;
    height: 32px;
    -webkit-appearance: button;
  }

  .account-container {
    position: relative;
    width: 288px;
    background: #fff;
    border-radius: 8px;

    .userguide-placeholder {
      height: 1px;

    }

    .account-container-account {
      padding: 20px;

      .account-container-account-name {
        cursor: pointer;
        font-size: 14px;
        color: #333;
        line-height: 21px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .account-container-account-to-examine {
        display: flex;
        margin-top: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;

        .account-container-account-status {
          font-size: 12px;
          border: 1px solid #d4d4d4;
          border-radius: 9px;
          padding: 0 6px;
          color: #333;
          height: 20px;
          line-height: 17px;
        }

        .count-container-account-safe {
          cursor: pointer;
        }

        img {
          width: 16px;
          height: 18px;
          margin-left: 10px;
          margin-top: 2px;
        }
      }
    }
  }

  .one-text-link-medium {
    font-size: 14px;
  }

  .account-container-account-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: center;

    .account-container-account-value {
      .account-container-account-value-name {
        font-size: 12px;
        color: #999;
        line-height: 18px;
        margin-bottom: 2px;
      }

      .account-container-account-value-number {
        font-size: 22px;
        color: #000;
        line-height: 26px;
      }
    }

  }

  .account-container-account-xin-yong {
    border-bottom: 0px;
    padding-bottom: 0;
  }

  .account-container-account-xin-yong > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .carcousel-container {
    width: 288px;
    height: 148px;
    background: #fff;
    border-radius: 8px;
    margin-top: 21px;
    overflow: hidden;
    position: relative;
  }
}

.product-dynamic-and-pinpai-container {
  width: 288px;
  background-color: #fff;
  margin-top: 22px;
  border-radius: 8px;

  .pinpai-container {

    position: relative;
    height: 162px;

    .pinpai-container-gapline {

      height: 1px;
      background-color: #eee;
      margin: -8px 20px 8px;
    }

    .pinpai-container-copywrit {
      box-sizing: border-box;
      padding-left: 20px;
      padding-top: 20px;
    }

    .pinpai-container-advertisement {

      position: absolute;
      top: 52px;
      width: calc(100% - 20px);
      display: flex;
      justify-content: center;

      font-size: 14px;
      line-height: 28px;

      .hot-product-title {

        font-size: 12px;
        margin-right: 5px;
        color: #999;
      }

      .common-out-link {
        img {


        }

        .pinpai-container-name {
          margin: 0 5px;
          font-size: 12px;
          color: #000;
          cursor: pointer;
          border: none;
          background-color: #edeef0;
        }
      }
    }
  }
}

.have-dynamic-content {
  height: 300px;

  .product-dynamic-container-head {

    position: relative;
    padding-top: 18px;
    padding-bottom: 14px;

    .title {
      font-size: 21px;
      color: #000;
      padding-left: 20px;
    }

    .display-more {

      font-size: 14px;
      position: absolute;
      right: 20px;
      padding-top: 5px;
      cursor: pointer;
    }
  }
}

.product-dynamic-carcousel-item-head {
  font-size: 14px;
  color: #333;
  padding-left: 18px;
  padding-right: 12px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;

  .one-text-link-medium {
    font-size: 14px;
  }

  .one-text-link-normal {
    color: #13161ae6;
  }

  .one-text-link {
    text-decoration: none;
    cursor: pointer;
  }

}

.product-dynamic-carcousel-item-foot {

  font-size: 12px;
  color: #999;
  padding-left: 18px;
  padding-right: 12px;
  position: relative;
  margin-bottom: 16px;

  .mod-time {

    position: absolute;
    right: 20px;
  }
}

.el-date-editor /deep/ .el-range-separator {
  width: 8%;
}

.el-menu--horizontal > .el-submenu /deep/ .el-submenu__title {
  color: #282c33;
  /*#00359e*/
}

;
.el-menu--horizontal /deep/ .el-menu-item {
  color: #282c33;
}

.el-menu--horizontal > .el-submenu /deep/ .el-submenu__title:hover {
  color: #00359e;
  /*#00359e*/
}

el-menu /deep/ .el-menu--horizontal {
  border-bottom: none;
}
.product-card /deep/.one-button-normal-disabled{
  color: #53628080 !important;
  background : #f6f7fa !important;
}
</style>

<style scoped lang="less">
.el-menu--horizontal /deep/ .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 3px;
  background-color: #0054e6;
  transform: translateX(-50%);
}

.el-menu--horizontal /deep/ .el-menu-item.is-active {
  border-bottom: 2px solid transparent !important;
  color: #0054e6
}

// 覆盖样式区

</style>